<template>
  <div v-if="isNfcShow">
    <p class="mobileBamcTitle" v-if="dayDataInfo.length">日票</p>
    <ul class="mobileBamcWrapper" v-for="item in dayDataInfo">
      <li class="mobileBamcList">
        <template v-if="!item.paposthemeStyle">
          <img src="./card-banner01.png" alt="" />
        </template>
        <template v-else>
          <img :src="item.paposthemeStyle" alt="" />
        </template>
        <p class="dateTicket">{{ item.cardType }}</p>
        <svg
          class="go-icon"
          x="10"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 7 10"
        >
          <path
            fill="#FFFFFF"
            d="M322.292893,56.7071068 C321.902369,56.3165825 321.902369,55.6834175 322.292893,55.2928932 C322.683418,54.9023689 323.316582,54.9023689 323.707107,55.2928932 L328.414214,60 L323.707107,64.7071068 C323.316582,65.0976311 322.683418,65.0976311 322.292893,64.7071068 C321.902369,64.3165825 321.902369,63.6834175 322.292893,63.2928932 L325.585786,60 L322.292893,56.7071068 Z"
            transform="translate(-322 -55)"
          />
        </svg>
        <p class="bamcListNum">{{ item.cardNo | (card - reg) }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import md5 from "js-md5";
let swit = false; //变更开关
if (swit) {
  // 测试接口
  var reqPathUrl = "https://xcxdev.bmac.com.cn/";
  var reqThemeUrl =
    "https://weixindev.bmac.com.cn:8091/bmac/api/theme/getCardInfo";
} else {
  // 生产接口
  var reqPathUrl = "https://pay3prod.bmac.com.cn/gatewayAction/";
  var reqThemeUrl =
    "https://pay3prod.bmac.com.cn/pay3-theme/bmac/api/theme/getCardInfo";
}
export default {
  data() {
    return {
      dayDataInfo: [], // 日票数据
      isNfcShow: false,
      onlineFlag: true,
      dayCardThemeList: [],
      initCardInfo: [],
    };
  },
  mounted() {
    this.getOnlineStatus();
    setTimeout(() => {
      this.getDayCardInfo();
    }, 200);
  },
  methods: {
    //获取网络状态
    getOnlineStatus() {
      if (navigator.onLine) {
        this.onlineFlag = true;
      } else {
        this.onlineFlag = false;
      }
    },
    getDayCardInfo() {
      let data1 = JSON.parse(jsAPI.mobileManufacturerIsSupportBmac());
      if (data1) {
        console.log("是否支持手机一卡通" + data1.isSupportBmac);
        if (data1.isSupportBmac == 1) {
          let data2 = JSON.parse(jsAPI.isPhoneHaveNFC());
          if (data2) {
            if (data2.parameter.haveNFC == 1) {
              console.log("是否支持NFC " + data2.parameter.haveNFC);
              this.isNfcShow = true;
              let data3 = JSON.parse(jsAPI.getCardlistInfoData());
              if (data3) {
                console.log("日票数据");
                console.log(data3.dayCardInfo);
                if (data3.dayCardInfo && data3.dayCardInfo.length > 0) {
                  //隐藏无数据展示
                  document.getElementById("noDataBox").style.display = "none";
                  this.dayDataInfo = data3.dayCardInfo;
                  this.dayDataInfo.forEach((item, index) => {
                    this.initCardInfo.push(item.cardNo);
                  });
                }
                if (this.onlineFlag) {
                  console.log("日票皮肤走有网络业务");
                  if (this.initCardInfo.length > 0) {
                    setTimeout(() => {
                      this.getTokenInfo();
                    }, 200);
                  }
                } else {
                  console.log("日票皮肤走无网络业务");
                  if (this.dayDataInfo.length > 0) {
                    this.dayDataInfo.forEach((item, index) => {
                      this.dayDataInfo = this.dayDataInfo.map((item, index) => {
                        item = JSON.parse(JSON.stringify(item));
                        item.paposthemeStyle = "";
                        item.paposthemeStyleBig = "";
                        return item;
                      });
                    });
                  }
                }
              }
            }
          }
        }
      }
    },
    getTokenInfo() {
      if (swit) {
        // 测试接口
        var paramData = {
          userName: "admin",
          password: "admin",
        };
      } else {
        // 生产接口
        var paramData = {
          userName: "pay3-theme",
          password: "6kYfToyEfP",
        };
      }
      this.$ajax({
        method: "post",
        // url: "http://192.168.1.105:8190/auth",
        url: reqPathUrl + "auth",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
        data: paramData,
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
      }).then((res) => {
        let result = res.data;
        this.getThemesList(result.token, result.randomKey);
      });
    },
    getThemesList(tokenParame, randomKey) {
      // alert(this.initCardInfo)
      let getThemeDataList = {
        cardNo: this.initCardInfo,
        channelType: 0,
      };
      console.log("请求日票皮肤数据");
      console.log(getThemeDataList);
      let getThemeData = Base64.encode(JSON.stringify(getThemeDataList));
      let getThemeDataRandom = md5(getThemeData + randomKey);

      let homeTheme = JSON.stringify({
        object: getThemeData,
        sign: getThemeDataRandom,
      });
      // console.log(tokenParame)
      this.$ajax({
        method: "post",
        url: reqThemeUrl, // 获取卡面接口
        data: homeTheme,
        headers: {
          "content-type": "application/json",
          Authorization: "Bearer " + tokenParame,
        },
      })
        .then((res) => {
          console.log("获取日票皮肤数据");
          this.dayCardThemeList = JSON.parse(Base64.decode(res.data.object));
          console.log(this.dayCardThemeList);
          this.dayDataInfo = this.dayDataInfo.map((item, index) => {
            item = JSON.parse(JSON.stringify(item));
            item.paposthemeStyle = this.dayCardThemeList[index]
              ? this.dayCardThemeList[index].paposthemeStyle
              : "";
            item.paposthemeStyleBig = this.dayCardThemeList[index]
              ? this.dayCardThemeList[index].paposthemeStyleBig
              : "";
            return item;
          });
        })
        .catch((err) => {
          console.log("errr");
          if (this.dayDataInfo.length > 0) {
            this.dayDataInfo.forEach((item, index) => {
              this.dayDataInfo = this.dayDataInfo.map((item, index) => {
                item = JSON.parse(JSON.stringify(item));
                item.paposthemeStyle = "";
                item.paposthemeStyleBig = "";
                return item;
              });
            });
          }
        });
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../../common/stylus/mixin.styl';

.mobileBamcTitle {
  margin: 0.6rem 0 16px 0;
  font-size: 17px;
  font-weight: 600;
}

.mobileBamcWrapper {
  width: 100%;

  .mobileBamcList {
    margin: 0 0 10px 0;
    position: relative;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    width: 100%;
    height: 2.4rem;

    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }

    img {
      display: block;
      width: 100%;
      border-radius: 6px;
    }

    .bamcListNum {
      position: absolute;
      left: 0.4rem;
      bottom: 0.4rem;
      font-size: 17px;
      color: #fff;
    }

    .go-icon {
      position: absolute;
      top: 50%;
      margin-top: -5px;
      right: 16px;
      width: 7px;
      height: 10px;
    }

    .dateTicket {
      position: absolute;
      left: 0.4rem;
      top: 0.4rem;
      font-size: 17px;
      color: #fff;
    }
  }
}
</style>
